<script setup lang="ts">
import { ref } from 'vue'
// 引入pinia
import { storeToRefs } from 'pinia'
import { useIndexStore } from '@/store/index'
const store = useIndexStore()
const { count, foo, arr } = storeToRefs(store)
/* const count = ref<number>(store.count)
const foo = ref<string>(store.foo) */
// 调用store内的actions方法
const addCount = () => {
  store.addCount()
}
// store的$patch批量更新
const handleChangeState = () =>{
  store.$patch(state =>{
    state.count++,
    state.foo = '掌握pinia',
    state.arr.push('4')
  })
}
</script>
<template>
  <h4>{{ count }}</h4>
  <hr/>
  <h4>{{ store.timesCount(3)}}</h4>
  <h4>{{ foo }}</h4>
  <h4>{{ arr }}</h4>
  <hr/>
  <h3>{{ store.join }}</h3>
  <hr>
  <button @click="addCount">自增</button>
  <button @click="handleChangeState">批量更新</button>
</template>

